<template>
  <div class="app-container">
    <div class="left">
      <el-menu :default-active=active_index class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="1" @click="clickitem('snr','信噪比')">
          <img :src="map" alt="" class="map">
          &nbsp;
          <span slot="title">信噪比</span>
        </el-menu-item>
        <el-menu-item index="2" @click="clickitem('rsrp','信号强度')">
          <img :src="rssi" alt="" class="map">
          &nbsp;
          <span slot="title">信号强度</span>
        </el-menu-item>
        <el-menu-item index="3" @click="clickitem('battery','电池电压')">
          <img :src="battery" alt="" class="battery">
          <span slot="title">电池电压</span>
        </el-menu-item>
        <el-menu-item index="4" @click="clickitem('tilt','倾斜角度')">
          <img :src="zaxis" alt="" class="battery">
          &nbsp;
          <span slot="title">倾斜角度</span>
        </el-menu-item>
        <el-menu-item index="5" @click="clickitem('water','水浸状态')">
          <img :src="waterlevel" alt="" class="battery">
          &nbsp;
          <span slot="title">水浸状态</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <div class="box">
        <div class="titles">
          <span class="row">传感器详情</span>
          <el-button class="back" @click="back()"><i class="el-icon-d-arrow-left"></i>返回</el-button>
        </div>
        <div class="mycharts">
          <div class="chartstitles">
            <span>数据图表</span>
            <div style="float: right">
              <el-button class="day" v-model="imei" @click="listDay(imei)">
                最近一天
              </el-button>
              <el-button class="" v-model="imei" @click="listWeek(imei)">最近七天</el-button>
              <el-button class="" v-model="imei" @click="listMonth(imei)">最近一月</el-button>
              <el-button class="" v-model="imei" @click="listYear(imei)">最近一年</el-button>
            </div>
          </div>
          <div class="charts">
            <div id="main" style="width: 95%;height: 360px;"></div>
          </div>
        </div>
        <div class="infoLeft">
          <span class="message">数据信息</span>
          <hr width="98%" class="line">
          <span class="name">设备名称：{{imei}}</span>
          <br>
          <span class="type">数据类型：{{type_text}}</span>
          <br>
          <span class="type">数据值：{{type_value}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {listsnrDay,listsnrWeek,listsnrMonth,listsnrYear,listOneWater,listSevenWater,listMonthWater,listYearWater,listTiltDay,listTiltseven,listTiltmonth,listTiltYear,listBatteryDay,listBatteryweek,listBatteryMonth,listBatteryYear,listRsrpDay,listRsrpWeek,listRsrpmonth,listRsrpYear} from "@/api/system/statistics";
export default {
  name: 'Echarts',
  components:{

  },
  data() {
    return {
      input: '',
      map: require('@/layout/img/xinzaobi.svg'),
      waterlevel:require('@/layout/img/shuijin.png'),
      battery:require('@/layout/img/dianya.png'),
      zaxis:require('@/layout/img/jiaodu.png'),
      rssi:require('@/layout/img/xinhao.png'),
      tabPosition: 'left',
      //设备号
      imei:"",
      //信噪比
      dayrsrpList:{},
      res:[],
      x:[],
      y:[],
      active_index:'1',
      type:'',
      time:'day',
      type_text:'信噪比',
      type_value:0
    }
  },
  created() {
      this.getListimei();
  },
  methods: {
    handleSelect(a){
      this.active_index = a;
    },
    back(){
      this.$router.go(-1);
    },
    clickitem(str,text) {
      this.type = str;
      this.type_text = text;
      if(this.time == 'day'){
        this.$nextTick(() => {
          this.listDay(this.imei);
        });
      }else if(this.time == 'week'){
        this.$nextTick(() => {
          this.listWeek(this.imei);
        });
      }else if(this.time == 'month'){
        this.$nextTick(() => {
          this.listMonth(this.imei);
        });
      }else if(this.time == 'year'){
        this.$nextTick(() => {
          this.listYear(this.imei);
        });
      }
    },
    //接收页面传过来的设备号
    getListimei(){
      this.imei = this.$route.query.imei;
      this.type = this.$route.query.str;
      this.active_index = this.$route.query.index;
      this.$nextTick(() => {
        this.listDay(this.imei);
      });
    },
    //查询最近一天信噪比
    listDay(imei){
      this.time = 'day';
      console.log(this.type)
      if(this.type == 'snr'){
        listsnrDay(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].snr+'[db]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.snr);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'rsrp'){
        listRsrpDay(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].rsrp+'[dbm]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.rsrp);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'battery'){
        listBatteryDay(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].battery+'[V]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.battery);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'tilt'){
        listTiltDay(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].zaxis+'[deg]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.zaxis);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'water'){
        listOneWater(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].waterlevel+'[]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.waterlevel);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }
    },
    listWeek(imei){
      this.time = 'week';
      if(this.type == 'snr'){
        listsnrWeek(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].snr+'[db]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.snr);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'rsrp'){
        listRsrpWeek(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].rsrp+'[dbm]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.rsrp);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'battery'){
        listBatteryweek(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].battery+'[V]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.battery);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'tilt'){
        listTiltseven(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].zaxis+'[deg]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.zaxis);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'water'){
        listSevenWater(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].waterlevel+'[]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.waterlevel);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }
    },
    listMonth(imei){
      this.time = 'month';
      if(this.type == 'snr'){
        listsnrMonth(imei).then(res => {
          this.type_value = res.rows[0]?(res.rows[0].snr+'[db]'):'';
          this.dayrsrpList = res.rows;
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.snr);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'rsrp'){
        listRsrpmonth(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].rsrp+'[dbm]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.rsrp);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'battery'){
        listBatteryMonth(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].battery+'[V]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.battery);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'tilt'){
        listTiltmonth(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].zaxis+'[deg]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.zaxis);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'water'){
        listMonthWater(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].waterlevel+'[]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.waterlevel);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }
    },
    listYear(imei){
      this.time = 'year';
      if(this.type == 'snr'){
        listsnrYear(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].snr+'[db]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.snr);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'rsrp'){
        listRsrpYear(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].rsrp+'[dbm]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.rsrp);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'battery'){
        listBatteryYear(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].battery+'[V]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.battery);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'tilt'){
        listTiltYear(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].zaxis+'[deg]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.zaxis);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }else if(this.type == 'water'){
        listYearWater(imei).then(res => {
          this.dayrsrpList = res.rows;
          this.type_value = res.rows[0]?(res.rows[0].waterlevel+'[]'):'';
          this.x = this.dayrsrpList.map(res => res.time);
          this.y = this.dayrsrpList.map(res => res.waterlevel);
          this.loading = false;
          this.$nextTick(() => {
            this.myEcharts();
          });
        })
      }
    },
    myEcharts(){
      var myChart = this.$echarts.init(document.getElementById('main'));
      console.log(this.x)
      //配置图表
      var option = {
        title: {
          text: '',
        },
        tooltip: {},
        legend: {
          data: ['']
        },
        xAxis: {
          type: 'category',
          data: this.x
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:this.y,
            type: 'line',
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted(){


  }
}
</script>
<style scoped>
.is-active{
  background: white!important;
  color: #303133!important;
}
.left{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #ecf0f5;
  width: 170px;
}
.el-menu{
  background-color: #f2f2f2!important;
}
.el-menu-vertical-demo{
  width: 150px;
}
.map{
  width: 15px;
  height: 15px;
}
.battery{
  width: 22px;
  height: 23px;
}
.right{
  position: absolute;
  left: 140px;
  top: 0;
  bottom: 0;
  right: 0;
  background: #f2f2f2;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box{
  position: relative;
  border-radius: 3px;
  border: 1px solid #d2d6de;
  width: 100%;
  background-color: #fff;
  padding: 0 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.charts{
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  border: 1px solid #dadada;
}
.message{
  display: inline-block;
  margin: 10px 0px 0px 10px;
}
.line{
  margin: 30px 0px 0px 0px;
  color: #bababa;
}
.name{
  display: inline-block;
  margin: 20px 0px 0px 10px;
}
.type{
  display: inline-block;
  margin: 0px 0px 0px 10px;
}
.titles{
  width: 100%;
  overflow: hidden;
  border-bottom: 2px solid #18bbfc;
  line-height: 40px;
  font-size: 14px;
}
.mycharts{
  width: 70%;
  display: inline-block;
  vertical-align: top;
}
.infoLeft{
  width: 30%;
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
}
.chartstitles{
  width: 100%;
  line-height: 50px;
  font-size: 14px;
}
.back{
  float: right;
  border: none!important;
  padding: 0!important;
  line-height: 40px;
  color: #1890ff;
}
.back:hover{
  background-color: white!important;
}
</style>
